<template>
  <div>
    <div slot="title"></div>
    <el-radio-group v-model="distribute">
      <el-radio :label="0">不分配</el-radio>
      <el-radio :label="1">分配到人员</el-radio>
      <!-- <el-radio :label="2">分配到部门</el-radio> -->
    </el-radio-group>
    <el-form
      ref="formRef"
      :model="form"
      v-if="distribute === 1"
      :rules="rules"
      label-position="top"
    >
      <el-form-item label="所属部门" prop="department">
        <el-cascader
          :clearable="true"
          style="width: 100%"
          size="small"
          filterable
          v-model="form.department"
          :options="departmentTree"
          :props="{
            label: 'name',
            value: '_id',
            emitPath: false,
          }"
          :show-all-levels="true"
          placeholder="请选择"
          @change="handlePartChange"
        >
        </el-cascader>
      </el-form-item>
      <el-form-item label="人员名称" prop="owner" style="margin-left: 20px">
        <el-select v-model="form.owner" placeholder="请选择" filterable>
          <el-option
            v-for="item in userList"
            :key="item._id"
            :label="item.name"
            :value="item._id"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <!-- <AgentTransfer
        v-show="distribute === 1"
        ref="AgentTransfer"
      ></AgentTransfer> -->
    <!-- <el-cascader
        :clearable="true"
        style="width:100%"
        size="small"
        v-show="distribute === 2"
        v-model="department"
        :options="departmentTree"
        :props="{ multiple: true, checkStrictly: true, label: 'name', value: '_id', emitPath: false }"
        :show-all-levels="true"
        :collapse-tags="false"
        placeholder="请选择">
      </el-cascader> -->
  </div>
</template>

<script lang="ts">
/**
 * 新增客户分配动作组件
 * 设置数据 setData 设置选中数据
 * 获取数据 getData 可以根据需要对数据进行过滤和筛选
 */
import { Component, Vue, Ref, Watch } from 'vue-property-decorator'
import AgentTransfer from '../common/agentTransfer.vue'
import { CommonModule } from '@/store/modules/common'
import { deepClone } from '@/utils/common'
@Component({
  name: 'CustomerDistribute',
  components: { AgentTransfer }
})
export default class CustomerDistribute extends Vue {
  @Ref() private readonly AgentTransfer
  @Ref() private readonly formRef
  // 分配动作
  private distribute = 0

  private form: any = {
    department: '',
    owner: ''
  }

  private rules: any = {
    owner: [{ required: true, trigger: 'change', message: '请选择人员' }]
  }

  get departmentTree () {
    return (CommonModule as any).publicCache.departmentTree.tree
  }

  public clearData () {
    this.distribute = 0
    this.form = {
      department: '',
      owner: ''
    }
    this.$nextTick(() => {
      if (this.formRef) {
        this.formRef.clearValidate()
      }
    })
  }

  // 获取座席
  get userList () {
    const list = (CommonModule as any).publicCache.userList
    let filterList: any = []
    if (this.form.department) {
      filterList = list.filter(v => {
        let departmentId: any = []
        if (v.departmentConfig) {
          departmentId = v.departmentConfig.departmentIdList
        }
        if (departmentId && departmentId.length && departmentId.includes(this.form.department)) {
          return true
        }
        return false
      })
    } else {
      filterList = list
    }
    return filterList.map(v => ({ name: `${v.agentName} 【${v.agentNumber}】`, _id: v._id }))
  }

  private checkForm () {
    let distributeStatus = false
    this.formRef.validate(valid => {
      if (valid) {
        distributeStatus = true
      }
    })
    return {
      distributeStatus,
      disForm: this.distribute ? { owner: this.form.owner } : {}
    }
  }

  private handlePartChange (val: any) {
    this.form.owner = ''
  }
}
</script>

<style lang="stylus" scoped>
.el-form
  display flex
  margin 16px 0px
  .el-form-item
    margin-bottom 0
>>> .el-form-item__label
  display inline
</style>
